<!-- <template>
  <div class="titlewhite"></div>
        <div class="nowshow-film" @click="changeFilmDetail">
            <div>
                <img src="../../public/img/filmtwo.png">
            </div>
            <div class="film-introduce">
                <p class="film-name">猛龙出击</p>
                <p>&nbsp;</p>
                <p class="film-actor">主演：陆革命 何翔 程媛媛</p>
                <p class="film-actor">上映时间：周五7月29日</p>
            </div>
            <div class="film-posi">
                <button class="film-order">预购</button>
            </div>
        </div>
        <div class="nowshow-film">
            <div>
                <img src="../../public/img/filmtwo.png">
            </div>
            <div class="film-introduce">
                <p class="film-name">猛龙出击</p>
                <p>&nbsp;</p>
                <p class="film-actor">主演：陆革命 何翔 程媛媛</p>
                <p class="film-actor">上映时间：周五7月29日</p>
            </div>
            <div class="film-posi">
                <button class="film-order">预购</button>
            </div>
        </div>
        <div class="nowshow-film">
            <div>
                <img src="../../public/img/filmtwo.png">
            </div>
            <div class="film-introduce">
                <p class="film-name">猛龙出击</p>
                <p>&nbsp;</p>
                <p class="film-actor">主演：陆革命 何翔 程媛媛</p>
                <p class="film-actor">上映时间：周五7月29日</p>
            </div>
            <div class="film-posi">
                <button class="film-order">预购</button>
            </div>
        </div>
        <div class="nowshow-film">
            <div>
                <img src="../../public/img/filmtwo.png">
            </div>
            <div class="film-introduce">
                <p class="film-name">猛龙出击</p>
                <p>&nbsp;</p>
                <p class="film-actor">主演：陆革命 何翔 程媛媛</p>
                <p class="film-actor">上映时间：周五7月29日</p>
            </div>
            <div class="film-posi">
                <button class="film-order">预购</button>
            </div>
        </div>
        <div class="nowshow-film">
            <div>
                <img src="../../public/img/filmone.png">
            </div>
            <div class="film-introduce">
                <p class="film-name">猛龙出击</p>
                <p>&nbsp;</p>
                <p class="film-actor">主演：陆革命 何翔 程媛媛</p>
                <p class="film-actor">上映时间：周五7月29日</p>
            </div>
            <div class="film-posi">
                <button class="film-order">预购</button>
            </div>
        </div>
        <div class="footwhite"></div>
</template> -->
<template>
    <div class="titlewhite"></div>
    <!-- <div class="nowshow-film" @click="changeFilmDetail">
        <div>
            <img src="../../public/img/30.jpg">
        </div>
        <div class="film-introduce">
            <p class="film-name">太湖鱼</p>
            <p>&nbsp;</p>
            <p class="film-actor">需要的联系</p>
            <p class="film-actor">15062446813</p>
        </div>
        <div class="film-posi">
            <button class="film-buy">购票</button>
        </div>
    </div> -->

    <div>
        <ul>
            <li v-for="qwe in dataList" :key="qwe.filmId">
                <div class="nowshow-film" @click="changeFilmDetail(qwe.filmId)">
                    <div>
                        <!-- <img src="../../public/img/30.jpg"> -->
                        <img :src="qwe.poster">
                    </div>
                    <div class="film-introduce">
                        <p class="film-name">{{ qwe.name }}</p>
                        <p class="film-actor">评分：</p>
                        <p>&nbsp;</p>
                        <span v-if="qwe.actors" class="film-actor">主演：{{ getActorsName(qwe.actors) }}</span>
                        <span v-else>暂无主演</span>
                        <p class="film-actor">{{ qwe.nation }}|{{ qwe.runtime }}分钟</p>
                    </div>
                    <div class="film-posi">
                        <button class="film-buy">购票</button>
                    </div>
                </div>

            </li>
        </ul>
    </div>
    <div class="footwhite"></div>
</template>
<script>
// @ is an alias to /src
import axios from "axios";
import { getMzFilmDetail, getBu } from "../api/product";
// import '../api/product' //直接导入并执行模块中的代码


export default {
    data() {
        return {
            dataList: [],
        };
    },
    //1
    created() {
        // getMzFilmDetail().then((res) => {
        //     console.log(res);

        //     this.dataList = res.data.data.films;
        // });

        //2

        getBu().then((res) => {
            console.log(res);

            this.dataList = res.data.data.films;
        });
    },
    methods: {
        changeFilmDetail(code) {
            // this.$router.push("/detail");
            this.$router.push({
                name: "detail",
                query: {
                    eee: code
                }
            })
        },

        //拼接名字方法
        getActorsName(actorsList) {
            return actorsList.map(item => item.name).join(' ')
        },
    },
};
</script>

